<template>
    <section class="fit-content">
        <a href="javascript:;" class="back" @click="$router.go(-1)"></a>
        <a href="javascript:;" class="share" @click="toShare"></a>
        <div class="fit-main">
            <div class="fit-backgroud"></div>
            <div class="fit-model" @click="blank"></div>
        </div>
        <div class="left-menu">
            <router-link to="/modelSet" class="face"><img class="item" src="../assets/image/fit/ico_-face.png">人脸</router-link>
            <a href="javascript:;" class="background" @click="showBg"><img class="item" src="../assets/image/fit/ico_scene.png">场景</a>
            <a href="javascript:;" class="history" @click="showHistory"><img class="item" src="../assets/image/fit/ico_record.png">记录</a>
        </div>
        <div :class="[{'isShowCloth': isCloth }, 'right-menu']" @click.self="blank">
            <div class="list">
                <a href="javascript:;" :class="[(type === 'shirt' && isCloth) ? 'on' : '', 'shirt']" @click="showCloth('shirt');"><i class="icon"></i>上装</a>
                <a href="javascript:;" :class="[(type === 'coat' && isCloth) ? 'on' : '', 'coat']" @click="showCloth('coat');"><i class="icon"></i>外套</a>
                <a href="javascript:;" :class="[(type === 'bottom' && isCloth) ? 'on' : '', 'bottom']" @click="showCloth('bottom');"><i class="icon"></i>下装</a>
                <a href="javascript:;" :class="[(type === 'shoes' && isCloth) ? 'on' : '', 'shoes']" @click="showCloth('shoes');"><i class="icon"></i>鞋子</a>
            </div><div class="cloth-main">
                <ul v-if="type === 'shirt'" class="cloth-shirt">
                    <li v-for="item in shirtList">
                        <a href="javascript:;" :class="{'on': item.spu == shirtSpu}" @click="fit(item.text, item.link, item.spu, 'shirt', item.src, item.thumb)"><img class="cloth-item" :src="item.thumb"><i></i></a>
                    </li>
                </ul>
                <ul v-if="type === 'coat'" class="cloth-coat">
                    <li v-for="item in coatList">
                        <a href="javascript:;" :class="{'on': item.spu == coatSpu}" @click="fit(item.text, item.link, item.spu, 'coat', item.src, item.thumb)"><img class="cloth-item" :src="item.thumb"><i></i></a>
                    </li>
                </ul>
                <ul v-else-if="type === 'bottom'" class="cloth-bottom">
                    <li v-for="item in bottomList">
                        <a href="javascript:;" :class="{'on': item.spu == bottomSpu}" @click="fit(item.text, item.link, item.spu, 'trouser', item.src, item.thumb)"><img class="cloth-item" :src="item.thumb"><i></i></a>
                    </li>
                </ul>
                <ul v-else-if="type === 'shoes'" class="cloth-shoes"></ul>
            </div>
        </div>
        <div :class="[{'isShowBg': isBg}, 'background-main']">
            <ul>
                <li>
                    <a href="javascript:;" :class="{'on': isCoat}"><img class="bg-item" src="../assets/image/fit/cloth.jpg"><i></i>默认</a>
                </li>                
            </ul>
        </div>
        <transition name="fade-color">
        <div class="cloth-color">
            <ul>
                <li>
                    <a class="color-item" href="javascript:;"><img src=""><i></i></a>
                </li><li>
                    <a class="color-item" href="javascript:;"><img src=""><i></i></a>
                </li><li>
                    <a class="color-item" href="javascript:;"><img src=""><i></i></a>
                </li>
            </ul>
        </div>
        </transition>
        <div :class="[{'showShare' : isShare}, 'share-main']">
            <a href="javascript:;" class="close" @click="isShare = !isShare"></a>
            <a href="javascript:;" class="save" @click="isShare = !isShare">保存</a>
            <canvas class="share-img" width="1000" height="1000"></canvas>
            <div class="share-con">
                <div class="share-list">
                    <a class="share-item" href="javascript:;">
                        <img src="../assets/image/fit/wechat@2x.png">
                        微信
                    </a>
                    <a class="share-item" href="javascript:;">
                        <img src="../assets/image/fit/friend@2x.png">
                        朋友圈
                    </a>
                    <a class="share-item" href="javascript:;">
                        <img src="../assets/image/fit/qq@2x.png">
                        qq好友
                    </a>
                </div>
                <div class="share-list">
                    <a class="share-item" href="javascript:;">
                        <img src="../assets/image/fit/qzone@2x.png">
                        qq空间
                    </a>
                    <a class="share-item" href="javascript:;">
                        <img src="../assets/image/fit/weibo@2x.png">
                        新浪微博
                    </a>
                    <a class="share-item" href="javascript:;">
                        <img src="../assets/image/fit/link@2x.png">
                        复制链接
                    </a>
                </div>
            </div>
        </div>
        <div :class="[{'showShare' : isShare}, {'showHistory' : isHistory}, 'mask']"></div>
        <div :class="[{'showHistory' : isHistory}, 'history-main']">
            <div class="title">试衣记录<a href="javascript:;" class="close" @click="isHistory = !isHistory"></a></div>
            <div class="history-con">
                <div v-for="item in historyList.content" class="history-item">
                    <img class="history-img" :src="item.thumb">
                    <div class="history-txt">{{item.text}}</div>
                    <router-link :to="{path: 'commodityDetail', query: {spu: item.spu}}" class="history-btn">查看详情</router-link>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import Vue from 'vue'
import fitRoom from '../assets/js/fitting'

export default {
    data () {
        return {
            isCloth: false,
            isBg: false,
            type: '',
            shirtSpu: '',
            bottomSpu: '',
            coatSpu: '',
            dressSpu: '',
            shoesSpu: '',
            shirtList: [
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '2017083001',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/lianyiqun1-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/lianyiqun1-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '1111112222',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/lianyiqun2-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/lianyiqun2-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '2017083002',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/lianyiqun3-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/lianyiqun3-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '65989565652',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/lianyiqun4-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/lianyiqun4-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '654654',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/lianyiqun5-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/lianyiqun5-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '42424',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/lianyiqun6-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/lianyiqun6-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '4534153',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/lianyiqun7-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/lianyiqun7-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '3434565767',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/lianyiqun8-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/lianyiqun8-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '2312365446',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/shangyi-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/shangyi-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '020',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/shangyi2-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/shangyi2-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '6556565656',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/shangyi3-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/shangyi3-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '55665654',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/shangyi4-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/shangyi4-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '5345',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/shangyi5-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/shangyi5-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '119',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/shangyi6-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/shangyi6-@2x.png'
                },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '345345',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/shangyi7-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/shangyi7-@2x.png'
                }
            ],
            coatList: [
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '56756',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/waitao1-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/waitao1-@2x.png'
                },
                // {
                //     text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                //     link: '/fit', 
                //     spu: '88885555',
                //     src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/waitao2-@2x.png',
                //     thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/waitao2-@2x.png'
                // },
                {
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '1223',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/waitao3-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/waitao3-@2x.png'
                }
            ],
            bottomList: [
                {           
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '1424',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/xiazhuang1-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/xiazhuang1-@2x.png'
                },
                {           
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '2323',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/xiazhuang2-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/xiazhuang2-@2x.png'
                },{           
                    text: '乐町2017秋装新款女装刺绣卫衣软妹韩版潮版潮版潮版潮版', 
                    link: '/fit', 
                    spu: '23232',
                    src: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/temp/xiazhuang3-@2x.png',
                    thumb: 'http://shop-32544.oss-cn-shenzhen.aliyuncs.com/fit/thumb/xiazhuang3-@2x.png'
                },
            ],
            shoesList: [],            
            isShare: false,
            isActive: false,
            isHistory: false,
            isCoat:false,
            shareSrc: '',
            historyList: {
                spu:[],
                content: []
            }
        }
    },
    name: 'app', 
    created () {
       fitRoom.update({});
    },
    methods:{
        //换衣
        fit (text, link, spu, type, src, thumb) {
            let cloth = {};
            cloth.images = {};

            if(this.historyList.spu.indexOf(spu) < 0) {
                this.historyList.spu.push(spu);
                this.historyList.content.push({link: link, text: text, thumb: thumb, spu: spu});
            }
            if(this[type+"Spu"] === spu) {
                this[type+"Spu"] = "";
                 cloth.images[type] = "";
            } else {
                this[type+"Spu"] = spu;
                cloth.images[type] = src;
            }

            fitRoom.update(cloth);
        },

        toShare () {
            document.querySelector(".share-img").getContext("2d").drawImage( document.querySelector("#allFit"), 320, 0)
            this.isShare = !this.isShare
        },

        blank () {
            this.type = '';
            this.isCloth = false;
            this.isBg = false;
        },

        // 背景
        showBg () {
            this.isBg = !this.isBg;
        },

        // 衣服 --- 没有数据则ajax
        showCloth(type) {    
            if(this.type === type) {
                this.isCloth = !this.isCloth;
                this.isActive = !this.isActive;
            } else { 
                if(this.type === '') {
                    this.isCloth = !this.isCloth;
                    this.isActive = !this.isActive;
                }    

                this.type = type
            }

            // 上装
            // if(type === 'shirt') {
            //     if(this.shirtList.length < 1) {

            //     }
            // }

            // // 下装
            // if(type === 'bottom') {
            //     if(this.bottomList.length < 1) {

            //     }
            // }

            // // 裙装
            // if(type === 'shirt') {
            //     if(this.shirtList.length < 1) {

            //     }
            // }

            // // 鞋子
            // if(type === 'shoes') {
            //     if(this.shoesList.length < 1) {

            //     }
            // }
        },
        showHistory () {
            this.isHistory = !this.isHistory;
        }
    }
}
</script>
<style lang="scss">
    @mixin border-radius-tr{ border-top-right-radius: 0.2rem;}
    @mixin border-radius-tl{ border-top-left-radius: 0.2rem;}
    @mixin border-radius-br{ border-bottom-right-radius: 0.2rem;}
    @mixin border-radius-bl{ border-bottom-left-radius: 0.2rem;}
    @mixin animation{ transition: all .3s ease;}    

    .fit-content {
        height: 100%;

        @mixin top-button{
            position: fixed;
            display: block;
            top: 0.3rem;
            width: 0.88rem;
            height: 0.88rem;
        }

        .back {
            left: 0.36rem;
            background: url(../assets/image/fit/back.png) no-repeat center center / cover;            
            @include top-button;
            z-index: 1;
        }

        .share {
            right: 0.36rem;
            background: url(../assets/image/fit/share.png) no-repeat center center / cover;
            @include top-button;
            z-index: 1;
        }

        .fit-main {
            width: 7.5rem;
            height: 7.5rem;
        }

        .fit-model {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

            >canvas {
                margin: 2.05rem auto 0;
                display: block;
            }
        }

        .left-menu {
            position: fixed;
            left: 0.3rem;
            top: 3.04rem;
            background: #fff;
            border-radius: 0.5rem;
            
            a {
                padding-top: 0.4rem;
                display: block;
                text-align: center;
                width: 1.0rem;
                height: 1rem;
                color: #151517;
                font-size: 0.2rem;
            }

            .item {
                display: block;
                margin: 0 auto 0.1rem;
                width: 0.4rem;
                height: 0.4rem;
            }
        }

        .right-menu {
            position: fixed;
            right: 0rem;
            top: 1.43rem;
            transform: translate3d(1.4rem, 0, 0);
            @include animation;

            .list {
                display: inline-block;
                margin-top: 1.6rem;
                width: 1.0rem;
                background: #fff;
                vertical-align: top;
                @include border-radius-tl;
                @include border-radius-bl;

                > a {
                    display: inline-block;
                    font-size: 0.2rem;
                    color: #666;
                    width: 100%;
                    height: 1.0rem;
                    text-align: center;

                    &.on {                        
                        color: #ff365d;
                    }
                }

                .shirt{
                    @include border-radius-tl;

                    > .icon {
                        background-image: url(../assets/image/fit/ico_up_def.png);
                    }

                    &.on > .icon{
                        background-image: url(../assets/image/fit/ico_up_sele.png);
                    }
                }

                .coat {                    
                    > .icon {
                        background-image: url(../assets/image/fit/ico_coat_def.png);
                    }

                    &.on > .icon{
                        background-image: url(../assets/image/fit/ico_coat_sele.png);
                    }
                }

                .bottom {
                    > .icon {
                        background-image: url(../assets/image/fit/ico_down_def.png);
                    }

                    &.on > .icon{ 
                        background-image: url(../assets/image/fit/ico_down_sele.png);
                    }
                }

                .dress {
                    > .icon {
                        background-image: url(../assets/image/fit/ico_skirt_def.png);
                    }

                    &.on > .icon{ 
                        background-image: url(../assets/image/fit/ico_skirt_sele.png);
                     }
                }

                .shoes {
                    > .icon {
                        background-image: url(../assets/image/fit/ico_shoe_def.png);
                    }

                     &.on > .icon{ 
                        background-image: url(../assets/image/fit/ico_shoe_sele.png);
                     }
                }

                .shoes {
                    @include border-radius-bl;
                }

                .icon {
                    display: block;
                    margin: 0.24rem auto 0.07rem;
                    width: 0.3rem;
                    height: 0.3rem;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: cover;
                }
            }
        }
        
        .cloth-main, .background-main {
            display: inline-block;
            height: 10.3rem;      
            width: 1.4rem;
            background: #fff;
            overflow-y: scroll;
            @include border-radius-tl;
            @include border-radius-bl;

            a {
                position: relative;
                display: block;
                margin: .1rem;
                width: 1.2rem;
                height: 1.4rem;
                text-align: center;

                &.on {
                    background: #f1f1f1;

                    >i {
                        display: block;
                    }
                }
            }

            .cloth-item {       
                display: inline-block;
                margin-top: 0.2rem;
                width: 1rem;
                height: 1rem;
            }

            i {
                display: none;
                position: absolute;
                right: 0;
                top: 0;
                width: .3rem;
                height: .3rem;
                background: url(../assets/image/fit/select.png) no-repeat center center /cover;
            }
        }      

        .background-main {
            display: block;
            position: fixed;
            top: 1.43rem;
            right: 0rem;
            @include animation;
            transform: translate3d(1.4rem, 0, 0); 

            li {                    
                width: 1.4rem;
                height: 1.6rem;
            } 

            a {
                margin: .1rem auto 0;   
                width: 1.2rem;
                height: 1.2rem;
                font-size: 0.2rem;
                color: #151517;
                line-height: 1;

                &.on {
                    background: #fff;
                }
            }       

            .bg-item {
                margin-bottom: .09rem;
                width: 1.2rem;
                height: 1.2rem;
            }      
        }

        .isShowCloth { 
            @include animation; 
            transform: translate3d(0, 0, 0);
        }

        .isShowBg.background-main{ 
            display: block;
            @include animation; 
            transform: translate3d(0, 0, 0); 
        }

        .cloth-color {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            display: none;

            &.showColor {
                display: block;
            }

            > ul {
                text-align: center;
            }

            li {
                display: inline-block;

                &:first-child .color-item {
                    @include border-radius-tl;
                }

                &:last-child .color-item {
                    @include border-radius-tr;
                }
            }

            .color-item {
                display: block;
                padding: .2rem;
                height: .8rem;
                width: .8rem;
                background: #fff;

                &.on {
                    background: #f1f1f1;
                }

                > img {
                    height: .8rem;
                    width: .8rem;
                }
            }           
        }

        .share-main {            
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 4;
            display: none;

            &.showShare {
                display: block;
            }

            .share-img {
                display: block;
                left: 0;
                right: 0;
                position: absolute;
                margin: 1.28rem auto;
                width: 5.2rem;
                height: 5.2rem;
            }

            .save {
                display: block;
                position: absolute;
                right: 0.41rem;
                top: 0.69rem;
                color: #ff365d;
                font-size: 0.32rem;
            }

            .share-con {
                position: absolute;
                left: 0;
                width: 100%;
                bottom: 1.86rem;
            }

            .share-list {
                display: flex;
                left: 0;
                justify-content: center;
            }

            .share-item {
                flex: 1;
                color: #151517;
                font-size: 0.3rem;
                text-align: center;

                > img {
                    width: 1.0rem;
                    height: 1.0rem;
                    vertical-align: center;
                    margin: .5rem auto;
                }
            }

            .close {
                display: block;
                width: 0.5rem;
                height: 0.5rem;
                position: absolute;
                left: 0;
                right: 0;
                margin: auto;
                bottom: 0.68rem;
                background: url(../assets/image/fit/close@2x.png) no-repeat center center /cover;
            }
        }

        .history-main {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
            width: 6.3rem;
            height: 10.0rem;
            background: #fff;
            border-radius: .2rem;
            z-index: 4;

            &.showHistory {
                display: block;
            }

            .history-con {
                height: 9rem;
                overflow-y: scroll;
            }

            .history-item {
                padding: 0.3rem;
                border-bottom: 1px solid #f1f1f1;
                height: 1.6rem;                
            }

            .history-img {
                float: left;
                height: 1.6rem;
                width: 1.6rem;
            }

            .history-txt {
                float: left;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                line-height: .325rem;
                vertical-align: middle;
                margin: 0.4925rem 0.22rem 0 .2rem;
                width: 2.4rem;
                height: 0.65rem;
                font-size: 0.24rem;
                color: #333;
            }
                
            .history-btn {
                float: left;
                vertical-align: middle;
                margin-top: .5rem;
                width: 1.2rem;
                height: 0.6rem;
                border: 2px solid #fe4a6b;
                color: #fe4a6b;
                text-align: center;
                line-height: .6rem;
                font-size: 0.24rem;
                border-radius: .1rem;
            }   

            .title {
                height: 1.0rem;
                line-height: 1.0rem;
                color: #151517;
                font-size: 0.32rem;
                border-bottom: 1px solid #ddd;
                text-align: center;
            }

            .close {
                display: block;
                position: absolute;
                right: 0.25rem;
                top: 0.25rem;
                width: 0.5rem;
                height: 0.5rem;
                background: url(../assets/image/fit/close@2x.png) no-repeat center center /cover;
            }
        }

        .mask {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            background: rgba(255, 255, 255, .8);
            display: none;

            &:before{
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                content: '';
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .2);
            }

            &.showShare, &.showHistory{
                display: block;
            }
        }
    }
</style>